<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>急速文件 - 相册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <style>
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 16px;
        }
        
        .photo-album {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .photo-album img {
            width: 100%;
            height: 170px;
            object-fit: cover;
            display: block;
        }
        
        .album-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
        }
        
        .album-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 2px;
        }
        
        .album-count {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .recent-photos {
            margin-top: 24px;
        }
        
        .recent-photos-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            padding: 0 16px;
        }
        
        .recent-photo {
            aspect-ratio: 1/1;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .recent-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="left">9:41</div>
            <div class="center"></div>
            <div class="right">
                <i class="fas fa-signal" style="margin-right: 5px;"></i>
                <i class="fas fa-wifi" style="margin-right: 5px;"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-bar-title">相册</div>
            <div>
                <i class="fas fa-search" style="margin-right: 16px;"></i>
                <i class="fas fa-camera"></i>
            </div>
        </div>
        
        <!-- 应用内容区 -->
        <div class="app-content">
            <!-- 相册分类 -->
            <div class="photo-grid">
                <div class="photo-album">
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="最近添加">
                    <div class="album-info">
                        <div class="album-title">最近添加</div>
                        <div class="album-count">243张</div>
                    </div>
                </div>
                
                <div class="photo-album">
                    <img src="https://images.unsplash.com/photo-1535530992830-e25d07cfa780?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="收藏">
                    <div class="album-info">
                        <div class="album-title">收藏</div>
                        <div class="album-count">56张</div>
                    </div>
                </div>
                
                <div class="photo-album">
                    <img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="家庭">
                    <div class="album-info">
                        <div class="album-title">家庭</div>
                        <div class="album-count">189张</div>
                    </div>
                </div>
                
                <div class="photo-album">
                    <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="旅行">
                    <div class="album-info">
                        <div class="album-title">旅行</div>
                        <div class="album-count">324张</div>
                    </div>
                </div>
            </div>
            
            <!-- 最近照片 -->
            <div class="recent-photos">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 16px; margin-bottom: 12px;">
                    <div class="section-title" style="margin: 0;">最近照片</div>
                    <a href="#" style="color: var(--primary-color); font-size: 14px;">查看全部</a>
                </div>
                
                <div class="recent-photos-grid">
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片1">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片2">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1535530992830-e25d07cfa780?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片3">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片4">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片5">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片6">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1516166328576-82e16a127024?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片7">
                    </div>
                    <div class="recent-photo">
                        <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片8">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-folder tab-icon"></i>
                <span class="tab-label">文件</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-image tab-icon"></i>
                <span class="tab-label">相册</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-cog tab-icon"></i>
                <span class="tab-label">设置</span>
            </div>
        </div>
    </div>
</body>
</html> 